﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <title>基础菜单 - Layui</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        /* 默认隐藏所有菜单组的子菜单 */
        .layui-menu-item-group > ul {
            display: none;
        }
        /* 当菜单组展开时显示子菜单 */
        .layui-menu-item-group.layui-menu-item-down > ul {
            display: block;
        }
        
        /* 一级菜单项样式优化 */
        .layui-menu-item-group > .layui-menu-body-title {
            color: #333 !important;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        /* 一级菜单悬停效果 */
        .layui-menu-item-group > .layui-menu-body-title:hover {
            color: #667eea !important;
            background-color: rgba(102, 126, 234, 0.08);
            border-radius: 6px;
            margin: 2px 8px;
        }
        
        /* 二级菜单项样式 */
        .layui-menu-item-group > ul > li .layui-menu-body-title {
            color: #555 !important;
            transition: all 0.3s ease;
            border-radius: 4px;
            margin: 1px 8px;
            text-decoration: none;
            display: block;
            padding: 8px 15px;
        }
        
        /* 二级菜单悬停效果 */
        .layui-menu-item-group > ul > li .layui-menu-body-title:hover {
            color: #667eea !important;
            background-color: rgba(102, 126, 234, 0.08);
            transform: translateX(3px);
        }
        
        /* 三级菜单项样式 */
        .layui-menu-item-group ul .layui-menu-item-group > .layui-menu-body-title {
            color: #555 !important;
            font-weight: 500;
        }
        
        /* 三级菜单悬停效果 */
        .layui-menu-item-group ul .layui-menu-item-group > .layui-menu-body-title:hover {
            color: #667eea !important;
            background-color: rgba(102, 126, 234, 0.08);
        }
        
        /* 四级菜单项样式 */
        .layui-menu-item-group ul .layui-menu-item-group ul li .layui-menu-body-title {
            color: #666 !important;
        }
        
        /* 四级菜单悬停效果 */
        .layui-menu-item-group ul .layui-menu-item-group ul li .layui-menu-body-title:hover {
            color: #667eea !important;
            background-color: rgba(102, 126, 234, 0.08);
        }
        
        /* 选中状态优化 */
        .layui-menu-item-checked .layui-menu-body-title {
            color: #667eea !important;
            font-weight: 600;
        }
        
        /* 箭头图标优化 */
        .layui-menu-body-title i {
            color: #666;
            transition: color 0.3s ease;
        }
        
        .layui-menu-body-title:hover i {
            color: #667eea;
        }
        
        /* 选中状态的箭头 */
        .layui-menu-item-checked .layui-menu-body-title i {
            color: #667eea;
        }
        
        /* 布局样式 */
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }
        
        .main-container {
            display: flex;
            height: 100vh;
        }
        
        /* 左侧菜单区域 */
        .sidebar {
            width: 280px;
            background: #f8f9fa;
            border-right: 1px solid #e9ecef;
            overflow-y: auto;
            flex-shrink: 0;
        }
        
        .sidebar .layui-panel {
            width: 100%;
            margin: 8px;
            height: calc(100vh - 16px);
        }
        
        /* 右侧内容区域 */
        .content-area {
            flex: 1;
            background: #fff;
            display: flex;
            flex-direction: column;
        }
        
        /* 顶部标题栏 */
        .content-header {
            height: 60px;
            background: #fff;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .content-header h2 {
            margin: 0;
            color: #333;
            font-size: 18px;
            font-weight: 500;
        }
        
        /* 内容主体 */
        .content-main {
            flex: 1;
            overflow: hidden;
        }
        
        .content-main iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* 默认欢迎页面 */
        .welcome-page {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            flex-direction: column;
            color: #666;
        }
        
        .welcome-page .icon {
            font-size: 64px;
            margin-bottom: 20px;
            color: #667eea;
        }
        
        .welcome-page h3 {
            margin: 0 0 10px 0;
            font-size: 24px;
            color: #333;
        }
        
        .welcome-page p {
            margin: 0;
            font-size: 16px;
        }
    </style>

</head>
<body>
    <div class="main-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <div class="layui-panel">
        <ul class="layui-menu" id="demo-menu">
            <li lay-options="{id: 100}">
                <div class="layui-menu-body-title"><a href="javascript:;">首页</a></div>
            </li>
            <li class="layui-menu-item-divider"></li>
            <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                <div class="layui-menu-body-title">
                    人资系统 <i class="layui-icon layui-icon-down"></i>
                </div>
                <ul>
                    <li class="layui-menu-item-group" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">主数据 <i class="layui-icon layui-icon-down"></i></div>
                        <ul>
                            <li class="layui-menu-item-checked">
                                <a class="layui-menu-body-title" href="/HR/Position/Index" target="content-frame">职级管理</a>
                            </li>
                            <li><a class="layui-menu-body-title" href="/HR/Talent/Index" target="content-frame">人才登记</a></li>
                        </ul>
                    </li>
                    <li class="layui-menu-item-group" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">人资管理 <i class="layui-icon layui-icon-down"></i></div>
                        <ul>
                            <li class="layui-menu-item-checked">
                                <a class="layui-menu-body-title" href="/HR/Interview/Index" target="content-frame">面试管理</a>
                            </li>
                            <li><a class="layui-menu-body-title" href="/HR/Onboard/Index" target="content-frame">入职申请</a></li>
                            <li><a class="layui-menu-body-title" href="/HR/OnboardApproval/Index" target="content-frame">入职审核</a></li>
                        </ul>
                    </li>

                </ul>
            </li>
            @* ------------------生产系统----------------- *@
            <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                <div class="layui-menu-body-title">
                    生产系统 <i class="layui-icon layui-icon-down"></i>
                </div>
                <ul>
                    <li class="layui-menu-item-group" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">主数据 <i class="layui-icon layui-icon-down"></i></div>
                        <ul>
                            <li class="layui-menu-item-checked">
                                <a class="layui-menu-body-title" href="/Production/MaterialCategory/Index" target="content-frame">物料产品分类</a>
                            </li>
                            <li><a class="layui-menu-body-title" href="/Production/Material/Index" target="content-frame">物料产品管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/Customer/Index" target="content-frame">客户管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/Supplier/Index" target="content-frame">供应商管理</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/Process/Index" target="content-frame">工序设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/Workflow/Index" target="content-frame">工艺流程</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/Workshop/Index" target="content-frame">车间设置</a></li>          
                        </ul>
                    </li>
                    <li class="layui-menu-item-group" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">人资管理 <i class="layui-icon layui-icon-down"></i></div>
                        <ul>
                            <li class="layui-menu-item-checked">
                                <a class="layui-menu-body-title" href="/Production/Interview/Index" target="content-frame">面试管理</a>
                            </li>
                            <li><a class="layui-menu-body-title" href="/Production/Onboard/Index" target="content-frame">入职申请</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/OnboardApproval/Index" target="content-frame">入职审核</a></li>
                        </ul>
                    </li>
                    <li class="layui-menu-item-group" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">生产管理 <i class="layui-icon layui-icon-down"></i></div>
                        <ul>
                            <li><a class="layui-menu-body-title" href="/Production/Order/Index" target="content-frame">客户订单</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/WorkOrder/Index" target="content-frame">生产工单</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/Schedule/Index" target="content-frame">生产排产</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/Dispatch/Index" target="content-frame">生产派单</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/PickMaterial/Index" target="content-frame">生产领料</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/WorkReport/Index" target="content-frame">生产报工</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/ReturnMaterial/Index" target="content-frame">生产退料</a></li>
                            <li><a class="layui-menu-body-title" href="/Production/ScrapMaterial/Index" target="content-frame">生产废料</a></li>
                        </ul>
                    </li>
                    <li class="layui-menu-item-group" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">设备管理 <i class="layui-icon layui-icon-down"></i></div>
                        <ul>
                            <li><a class="layui-menu-body-title" href="/Equipment/Type/Index" target="content-frame">设备类型设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Equipment/Archive/Index" target="content-frame">设备台账</a></li>
                            <li><a class="layui-menu-body-title" href="/Equipment/MaintenanceItem/Index" target="content-frame">点检保养项目</a></li>
                            <li><a class="layui-menu-body-title" href="/Equipment/MaintenancePlan/Index" target="content-frame">点检保养计划</a></li>
                            <li><a class="layui-menu-body-title" href="/Equipment/RepairOrder/Index" target="content-frame">维修单</a></li>
                        </ul>
                    </li>
                    <li class="layui-menu-item-group" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">工装夹具管理 <i class="layui-icon layui-icon-down"></i></div>
                        <ul>
                            <li><a class="layui-menu-body-title" href="/Tooling/Type/Index" target="content-frame">类型设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Tooling/Archive/Index" target="content-frame">工装夹具台账</a></li>
                        </ul>
                    </li>
                    <li class="layui-menu-item-group" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">质量管理 <i class="layui-icon layui-icon-down"></i></div>
                        <ul>
                            <li><a class="layui-menu-body-title" href="/Quality/Defect/Index" target="content-frame">常见缺陷</a></li>
                            <li><a class="layui-menu-body-title" href="/Quality/InspectionItem/Index" target="content-frame">检测项设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Quality/InspectionTemplate/Index" target="content-frame">检测模板</a></li>
                            <li><a class="layui-menu-body-title" href="/Quality/PendingTask/Index" target="content-frame">待检任务</a></li>
                            <li><a class="layui-menu-body-title" href="/Quality/IncomingInspection/Index" target="content-frame">来料检验</a></li>
                            <li><a class="layui-menu-body-title" href="/Quality/ProcessInspection/Index" target="content-frame">过程检验</a></li>
                            <li><a class="layui-menu-body-title" href="/Quality/OutgoingInspection/Index" target="content-frame">出货检验</a></li>
                        </ul>
                    </li>
                    <li class="layui-menu-item-group" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">排班管理 <i class="layui-icon layui-icon-down"></i></div>
                        <ul>
                            <li><a class="layui-menu-body-title" href="/Schedule/Team/Index" target="content-frame">班组设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Schedule/Plan/Index" target="content-frame">排班计划</a></li>
                            <li><a class="layui-menu-body-title" href="/Schedule/Holiday/Index" target="content-frame">节假日设置</a></li>
                            <li><a class="layui-menu-body-title" href="/Schedule/Calendar/Index" target="content-frame">排班日历</a></li>
                        </ul>
                    </li>

                </ul>
            </li>
            @* ------------------仓储管理----------------- *@
            <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                <div class="layui-menu-body-title">
                    仓储管理 <i class="layui-icon layui-icon-down"></i>
                </div>
                <ul>
                    <li><a class="layui-menu-body-title" href="/Warehouse/Inventory/Index" target="content-frame">库存现有量</a></li>
                    <li><a class="layui-menu-body-title" href="/Warehouse/Inbound/Index" target="content-frame">入库管理</a></li>
                    <li><a class="layui-menu-body-title" href="/Warehouse/Outbound/Index" target="content-frame">出库管理</a></li>
                    <li><a class="layui-menu-body-title" href="/Warehouse/Transfer/Index" target="content-frame">库存调拨</a></li>
                    <li><a class="layui-menu-body-title" href="/Warehouse/Stocktaking/Index" target="content-frame">库存盘点</a></li>
                    <li><a class="layui-menu-body-title" href="/Warehouse/Config/Index" target="content-frame">仓库设置</a></li>
                    <li><a class="layui-menu-body-title" href="/Warehouse/Location/Index" target="content-frame">库位管理</a></li>
                </ul>
            </li>
            @* ------------------订单管理----------------- *@
            <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                <div class="layui-menu-body-title">
                    订单管理 <i class="layui-icon layui-icon-down"></i>
                </div>
                <ul>
                    <li><a class="layui-menu-body-title" href="/Order/Sales/Index" target="content-frame">销售订单</a></li>
                    <li><a class="layui-menu-body-title" href="/Order/Delivery/Index" target="content-frame">销售送货单</a></li>
                </ul>
            </li>
            @* ------------------数据分析----------------- *@
            <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                <div class="layui-menu-body-title">
                    数据分析 <i class="layui-icon layui-icon-down"></i>
                </div>
                <ul>
                    <li><a class="layui-menu-body-title" href="/Analytics/Inventory/Index" target="content-frame">库存数据</a></li>
                    <li><a class="layui-menu-body-title" href="/Analytics/InOutCompare/Index" target="content-frame">物料出入库对比</a></li>
                    <li><a class="layui-menu-body-title" href="/Analytics/MaterialFlow/Index" target="content-frame">物料流转数据</a></li>
                </ul>
            </li>
            @* ------------------RBAC权限管理----------------- *@
            <li class="layui-menu-item-group" lay-options="{type: 'group', spread: false}">
                <div class="layui-menu-body-title">
                    RBAC <i class="layui-icon layui-icon-down"></i>
                </div>
                <ul>
                    <li><a class="layui-menu-body-title" href="/User/UserPage" target="content-frame">用户管理</a></li>
                    <li><a class="layui-menu-body-title" href="/RBAC/Role/Index" target="content-frame">角色管理</a></li>
                    <li><a class="layui-menu-body-title" href="/RBAC/Permission/Index" target="content-frame">权限管理</a></li>
                </ul>
            </li>

            <li class="layui-menu-item-divider"></li>


        </ul>
            </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="content-area">
            <!-- 顶部标题栏 -->
            <div class="content-header">
                <h2 id="page-title">欢迎使用ERP系统</h2>
            </div>
            
            <!-- 内容主体 -->
            <div class="content-main">
                <!-- 默认欢迎页面 -->
                <div class="welcome-page" id="welcome-page">
                    <div class="icon">🏠</div>
                    <h3>欢迎使用ERP管理系统</h3>
                    <p>请点击左侧菜单开始使用系统功能</p>
                </div>
                
                <!-- iframe容器，用于加载页面 -->
                <iframe id="content-frame" name="content-frame" style="display: none;"></iframe>
            </div>
        </div>
    </div>

    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['element', 'layer', 'util'], function(){
          var element = layui.element;
          var layer = layui.layer;
          var util = layui.util;
          
          // layui 2.5.6版本使用element模块处理菜单
          // 不需要手动渲染，layui会自动处理
          
          // 手动折叠所有菜单组
          document.querySelectorAll('#demo-menu .layui-menu-item-group').forEach(function(item) {
            item.classList.remove('layui-menu-item-down');
          });
          
          // 为菜单组标题添加点击事件
          document.querySelectorAll('.layui-menu-item-group > .layui-menu-body-title').forEach(function(title) {
            title.addEventListener('click', function(e) {
              e.preventDefault();
              var parentLi = this.parentElement;
              var icon = this.querySelector('i');
              
              // 切换展开/折叠状态
              if (parentLi.classList.contains('layui-menu-item-down')) {
                parentLi.classList.remove('layui-menu-item-down');
                if (icon) {
                  icon.className = 'layui-icon layui-icon-down';
                }
              } else {
                parentLi.classList.add('layui-menu-item-down');
                if (icon) {
                  icon.className = 'layui-icon layui-icon-up';
                }
              }
            });
          });
          
          // 菜单点击事件（layui 2.5.6使用element模块）
          element.on('nav(demo-menu)', function(options){
            console.log(this, options);
            // 显示 - 仅用于演示
            if(layer && util) {
              layer.msg(util.escape(JSON.stringify(options)));
            }
          });
          
          // 添加菜单项点击事件处理
          function handleMenuClick(menuText, url) {
            // 更新页面标题
            document.getElementById('page-title').textContent = menuText;
            
            // 隐藏欢迎页面
            document.getElementById('welcome-page').style.display = 'none';
            
            // 显示iframe并加载页面
            var iframe = document.getElementById('content-frame');
            iframe.style.display = 'block';
            iframe.src = url;
          }
          
          // 为所有叶子菜单项添加点击事件（包括a标签和div标签）
          document.querySelectorAll('.layui-menu li:not(.layui-menu-item-group):not(.layui-menu-item-divider) .layui-menu-body-title').forEach(function(item) {
            item.addEventListener('click', function(e) {
              // 移除所有选中状态
              document.querySelectorAll('.layui-menu .layui-menu-item-checked').forEach(function(selected) {
                selected.classList.remove('layui-menu-item-checked');
              });
              
              // 添加选中状态
              this.parentElement.classList.add('layui-menu-item-checked');
              
              var menuText = this.textContent.trim();
              
              // 更新页面标题
              document.getElementById('page-title').textContent = menuText;
              
              // 隐藏欢迎页面，显示iframe
              document.getElementById('welcome-page').style.display = 'none';
              
              var iframe = document.getElementById('content-frame');
              iframe.style.display = 'block';
              
              // 调试信息
              console.log('点击菜单项:', menuText, '标签类型:', this.tagName);
              
              // 对于a标签，让浏览器自然处理target="content-frame"
              if (this.tagName.toLowerCase() === 'a') {
                console.log('a标签，href:', this.href);
              } else {
                // 如果还有div标签的菜单项，阻止默认行为
                e.preventDefault();
                console.log('div标签，暂无对应URL');
              }
            });
          });
          
          // 首页点击事件
          document.querySelector('a[href="javascript:;"]').addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有选中状态
            document.querySelectorAll('.layui-menu .layui-menu-item-checked').forEach(function(selected) {
              selected.classList.remove('layui-menu-item-checked');
            });
            
            // 显示欢迎页面
            document.getElementById('welcome-page').style.display = 'flex';
            document.getElementById('content-frame').style.display = 'none';
            document.getElementById('page-title').textContent = '欢迎使用ERP系统';
          });
          
          
        });
    </script>
</body>
</html>